<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/administration' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/news' }">新闻管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    表当区域-->
    <el-form :model="newsForm" :rules="newsRules" ref="newsRuleForm" label-width="100px" class="newRuleForm">
      <el-form-item label="新闻标题" prop="title">
        <el-input v-model="newsForm.title"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="newsForm.author"></el-input>
      </el-form-item>
      <el-form-item label="主题" prop="topic">
        <el-select v-model="newsForm.topic" placeholder="请选择">
          <el-option
                  v-for="item in topic"
                  :label="item.topic"
                  :value="item.topic">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新闻内容" prop="content">
        <el-input v-model="newsForm.content" type="textarea" :rows="18"></el-input>
      </el-form-item>
      <el-row>
        <el-button type="primary" class="submit" @click="submitForm()">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "EditingNews",
    data() {
      return {
        id: '',
        newsForm: {
          title: '',
          author: '',
          topic: '',
          content: ''
        },
        newsRules: {
          title: [{required: true, message: '请输入新闻标题', trigger: 'blur'}],
          author: [{required: true, message: '请填写作者', trigger: 'blur'}],
          topic: [{required: true, message: '请选择主题', trigger: 'blur'}],
          content: [{required: true, message: '请输入新闻标题', trigger: 'blur'}],
        },
        topic: []
      }
    },
    created() {
      this.id = this.$route.query.id
      if (this.id) {
        this.getNews()
      }
      this.getTopic()
    },
    methods: {
      getNews() {
        this.$store.dispatch('getSingleNews', this.id)
          .then(() => {
            this.newsForm = this.$store.state.singleNews
            console.log(this.$store.state.singleNews)
          })
      },
      getTopic() {
        this.$store.dispatch('getTopic')
          .then(() => {
            this.topic = this.$store.state.topic
          })
      },
      submitForm() {
        this.$refs.newsRuleForm.validate((valid) => {
          if (valid) {
            if (this.id) {
              this.$store.dispatch('editNews', this.newsForm)
                .then(() => {
                  this.$message.success('修改成功')
                  this.$router.push('/news')
                })
            } else {
              this.$store.dispatch('addNews', this.newsForm)
                .then(() => {
                  this.$message.success('发表成功')
                  this.$router.push('/news')
                })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
    },
    computed: {
      title() {
        if (this.id) {
          return '修改新闻'
        } else {
          return '添加新闻'
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .newRuleForm {
    width: 800px;
    margin: 20px 100px;

    .submit {
      float: right;
    }
  }
</style>